<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">

  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<body>
  <div id="home">
    <div style="padding-top: 1%;padding-left: 2%; background-color: #97df4f;display: flex;">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group>
      <div style="margin-top: 0.25%;margin-left: 7%;">
        <h4 style="font-weight: 600;">誉禾植物店后台管理</h4>
      </div>
    </div>
    <div style="display: flex;margin-top: 0.5%;">
      <div style="width: 15%;">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          :collapse="isCollapse">
          <el-menu-item index="1">
            <span slot="title"><a href="./home.html">主页</a></span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title"><a href="./goods.html">植物管理</a></span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title"><a href="./addGoods.html">新增植物</a></span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title"><a href="./information.html">新闻管理</a></span>
          </el-menu-item>
          <el-menu-item index="5">
            <span slot="title"><a href="./addInformation.html">新增新闻</a></span>
          </el-menu-item>
          <el-menu-item index="6">
            <span slot="title"><a href="./order.html">订单管理</a></span>
          </el-menu-item>
          <el-menu-item index="7">
            <span slot="title"><a href="./user.html">用户管理</a></span>
          </el-menu-item>
          <el-menu-item index="8">
            <span slot="title"><a href="./userinfo.html">个人信息</a></span>
          </el-menu-item>
          <el-menu-item index="9">
            <span slot="title"><a href="./login.html">退出登录</a></span>
          </el-menu-item>
        </el-menu>
      </div>
      <div style="width: 85%;padding-top: 2%;">
        <div style="width: 85%;margin: auto;padding-top: 3%;">
          <div style="width: 85%;margin: auto;padding-top: 3%;">
            <div style="width: 100%; border-bottom: 1px solid #aca7a7;display: flex;">
              <div><span style="font-size: 20px;font-weight: 600;">个人信息</span></div>
              <div style="margin-left: auto;padding-bottom: 1%;">
                <el-button @click="update()" plain>修改密码</el-button>
              </div>
            </div>
            <div style="margin-top: 3%;">
              <el-form status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"
                style="width: 60%;margin: auto;">
                <el-form-item label="名称" prop="name">
                  <el-input type="text" v-model="ruleForm.name" autocomplete="off" placeholder="请输入你的名称"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                  <el-upload class="avatar-uploader" :action="url+'/upload'" :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="url+'/download/'+imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="账号" prop="account">
                  <el-input type="text" v-model="ruleForm.account" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input type="text" v-model="ruleForm.password" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input type="text" v-model="ruleForm.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="success" @click="submitForm()">确认修改</el-button>
                  <el-button @click="resetForm()">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改密码 -->
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
      <el-form :model="updateForm" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码" prop="account">
          <el-input type="password" v-model="updateForm.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input type="password" v-model="updateForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input type="password" v-model="checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updatePass()">确认</el-button>
          <el-button @click="dialogVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</body>
<script>
  new Vue({
    el: '#home',
    data() {
      return {
        isCollapse: false,
        ruleForm: {},
        updateForm: {},
        imageUrl: '',
        url: 'http://localhost:9081/common',
        dialogVisible: false,
        checkPass:''
      };
    },
    created() {
      // 判断是否有登录
      if (localStorage.getItem("managentId") == null) {
        window.location.href = './login.html';
        return;
      } else {
        this.page_init();
      }
    },
    methods: {
      update() {
        this.dialogVisible = true;
        this.updateForm = {};
      },
      // 确认修改密码
      async updatePass() {
        if (this.updateForm.password !== this.checkPass) {
          // 两次密码不一致
          this.$message.error("两次输入的密码不一致");
        }
        // 设置管理员id
        this.updateForm.id = localStorage.getItem("managentId");
        // 发送请求
        const { data: result } = await this.$http.post("http://localhost:9081/plants_managent/updatePass",this.updateForm);
        if (result.flag) {
          // 修改成功
          this.$message.success(result.message);
          this.dialogVisible = false;
          window.location.href = './login.html';
        }else {
          this.$message.error(result.message);
        }
      },
      // 初始化
      async page_init() {
        const { data: result } = await this.$http.get("http://localhost:9081/plants_managent/userinfo/" + localStorage.getItem("managentId"));
        if (result.flag) {
          this.ruleForm = result.l;
          this.imageUrl = this.ruleForm.img;
        }
      },
      // 图片上传成功时调用
      handleAvatarSuccess(res, file) {
        this.imageUrl = res.data;
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // 确认修改
      async submitForm() {
        this.ruleForm.id = localStorage.getItem("managentId");
        this.ruleForm.img = this.imageUrl;
        const { data: result } = await this.$http.post("http://localhost:9081/plants_managent/update", this.ruleForm);
        if (result.flag) {
          this.$message.success(result.message)
        } else {
          this.$message.error(result.message)
        }
        this.page_init();
      },
      // 取消修改
      resetForm() {
        this.page_init();
      }
    }
  })
</script>

</html>